<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function ajax() {
            // 声明一个控队？想用来装入XMLHttpRequest
            let xmlHttpReq = null;
            // IE5 IE6是以ActiveObject的方式引入XMLHttpRequest的
            if (window.ActiveXObject) {
                xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                // 除IE5 IE6以外的浏览器XMLHttpRequest是window的子对象
            } else if (window.XMLHttpRequest) {
                // 实例化一个HMLHttpRequest
                xmlHttpReq = new XMLHttpRequest();
            }

            // 如果对象实例化成功
            if (xmlHttpReq != null) {
                // 调用open()方法并采用异步方式
                xmlHttpReq.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true);
                // 设置回调函数
                xmlHttpReq.onreadystatechange = doResult;
                // 因为使用get方式提交，所以可以使用null参数调用
                xmlHttpReq.send(null);
            }

            // 一旦readyState值改变，将会调用这个函数，readyState=4表示完成响应
            function doResult() {
                if (xmlHttpReq.readyState === 4) {
                    if (xmlHttpReq.status === 200) {
                        // 将xmlHttpReq.responseText的值赋给ID为resText的元素
                        document.getElementById('resText').innerHTML = xmlHttpReq.responseText;
                    }
                }
            }
        }
    </script>
</head>
<body>
<div id="root">
    <input type="button" id="" value="Ajax请求页面" onclick="ajax();"/>
    <div id="resText"></div>
</div>
</body>
</html>